<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import UserScalePage from "./Hooks/UserScalePage.ts";
let opstion = {
  targetX: 1920,
  targetY: 1080,
  targetRatio: 16 / 9,
};
UserScalePage(opstion);

const changeSize = () => {
  // 视觉搞尺寸1920*1080
  const percentW = document.documentElement.clientWidth / 1920;
  const percentH = document.documentElement.clientHeight / 1080;
  const mainBox = document.getElementById("main-box");
  if (mainBox) {
    mainBox.style.transform = "scale(" + percentW + ", " + percentH + ")";
  }
};

onMounted(() => {
  window.addEventListener("resize", changeSize);
  changeSize();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", changeSize);
});
</script>

<template>
  <div :style="scaleStyle">
    <router-view></router-view>
  </div>
</template>

<style>
@import "./assets/styles/style.css";
@font-face {
  font-family: "DingTalkJinBuTi";
  src: url("@/assets/fonts/DingTalkJinBuTi.ttf") format("truetype"); /* 本地字体路径 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PangMenZhengDao";
  src: url("@/assets/fonts/PangMenZhengDao.ttf") format("truetype"); /* 本地字体路径 */
  font-weight: normal;
  font-style: normal;
}
body,
html,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
